<template>
  <div class="navitem">
   <el-menu
     mode="vertical"
     :default-active="menu[0].id"
     class="el-menu-vertical-demo"
     :collapse-transition="true"
     @open="handleOpen"
     active-text-color="#3377FF"
     router
     @close="handleClose">
     <el-menu-item v-for="(item,index) in menu" :index="item.path" :class="tabName == item.path?'menu_active':''">
       <span slot="title">{{item.name}}</span>
     </el-menu-item>
   </el-menu>
  </div>
</template>

<script>
   export default {
     data(){
       return{
         tabPosition: 'left',
          menu:[
            {
              id:"1",
              name:"摘要",
              path:"/detail"
            },
            {
              id:"2",
              name:"权利要求",
              path:"/power"
            },
            {
              id:"3",
              name:"说明书",
              path:"/instructions"
            },
            {
              id:"4",
              name:"附图",
              path:"/drawings"
            },
            {
              id:"5",
              name:"全文",
              path:"/fullText"
            },
            {
              id:"6",
              name:"同族信息",
              path:"/kindred"

            },
            {
              id:"7",
              name:"法律信息",
              path:"/law"
            },
          ]
       }
     },
     computed:{
     	  tabName() {
          return this.$route.path
     	  },
     },
      methods: {
        handleOpen(key, keyPath) {
          // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          // console.log(key, keyPath);
        }
      }
    }
</script>

<style lang="less">
 .navitem{
   width:260px;
   height: 100%;
   position: fixed;
    top:100px;
    bottom: 0;
    left: 0;
   background: #fff;
   z-index: 6;
  border-right:20px solid #f4f5f7;
 }
 .menu_active{
  border-right:3px solid #3377FF;
  background-color: #F3F8FE;
 }
</style>
